<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>减肥</title>
</head>

<body>
  <!-- <h1>我要瘦到120斤！！</h1> -->
  <template id="product">
    <div>
      <h2>二级</h2>
      <router-link to="/product/login" tag="button">点击跳转登录</router-link>
      <router-link to="/product/register" tag="button">点击跳转注册</router-link>
      <router-view></router-view>

      <h2>下一级</h2>
    </div>
  </template>
  <template id="guanli">
    <div>
      <h2>二级</h2>
      <router-link to="/guanli/add" tag="button">点击跳添加</router-link>
      <router-link to="/guanli/emit" tag="button">点击跳修改</router-link>
      <router-view></router-view>

      <h2>下一级</h2>
    </div>
  </template>
  <div id="box">

    <h1>路由！</h1>
    <!-- 
    <a href="#/login">登录</a>
    <a href="#/register">注冊</a> -->



    <router-link to="/guanli" tag="button">点击跳管理</router-link>
    <!-- 一级 -->
    <router-link to="/product" tag="button">发疯</router-link>
    <router-view></router-view>

  </div>
  <script src="/vue/lib/vue.js"></script>
  <!-- 引入vue路由文件 -->
  <script src="/vue/lib/vue-router.js"></script>
  <script>
    const login = {
      template: `<h1>哈哈哈</h1>`
    }
    const register = {
      template: `<h1>666</h1>`
    }
    // 声明一个模板
    const product = {
      template: `#product`
    }
    const add = {
      template: `<h1>添加</h1>`
    }
    const emit = {
      template: `<h1>修改</h1>`
    }
    const guanli = {
      template: `#guanli`
    }

    // 创建路由对象，定义路由规则
    const router = new VueRouter({
      routes: [
        {
          path: '/product', component: product,
          children: [
            { path: 'login', component: login },
            { path: 'register', component: register },
          ],
        },
        {
          path: '/guanli', component: guanli,
          children: [
            { path: 'add', component: add },
            { path: 'emit', component: emit },

          ]
        }

      ]
    })
    var vue = new Vue({
      el: '#box',
      data: { mas: 12 },
      methods: {},
      router: router

      // 有了它声明的模板才能用
      // components: {
      //   login,
      //   register
      // }
    })
  </script>
</body>

</html>